{% extends "templates/marketplace/base.html" %}
{%- from "templates/marketplace/macros.html" import button, link, breadcrumbs, badge_gray, badge_green,
five_star_rating -%}

{%- block title -%}
<title>{{ app.title }} - Frappe Cloud Marketplace</title>
{%- endblock -%}

{%- block body -%}
<div>
	<div class="px-4 sm:px-8">
		<div class="mt-5">
			{{ breadcrumbs([ { 'label': 'Apps', 'url': '/marketplace' }, { 'label':
			app.title, 'url': '' } ]) }}
		</div>

		<div class="flex flex-col pt-4 pb-8 md:flex-row md:space-x-10">
			{{ sidebar() }} {{ main() }}
		</div>
	</div>
</div>
{%- endblock -%}


{% macro sidebar() %}
<div class="order-1 w-full md:order-none md:w-2/12 space-y-9">
	{{ app_image(app, 'hidden md:block') }}

{%- if app.frappe_approved -%}
	<div class="flex">
			<span class="text-base mr-2">Frappe Approved</span>
			<div class="flex items-center justify-center">
				<svg height="14" viewBox="0 0 512 512" width="14" xmlns="http://www.w3.org/2000/svg"><path d="m512 268c0 17.9-4.3 34.5-12.9 49.7s-20.1 27.1-34.6 35.4c.4 2.7.6 6.9.6 12.6 0 27.1-9.1 50.1-27.1 69.1-18.1 19.1-39.9 28.6-65.4 28.6-11.4 0-22.3-2.1-32.6-6.3-8 16.4-19.5 29.6-34.6 39.7-15 10.2-31.5 15.2-49.4 15.2-18.3 0-34.9-4.9-49.7-14.9-14.9-9.9-26.3-23.2-34.3-40-10.3 4.2-21.1 6.3-32.6 6.3-25.5 0-47.4-9.5-65.7-28.6-18.3-19-27.4-42.1-27.4-69.1 0-3 .4-7.2 1.1-12.6-14.5-8.4-26-20.2-34.6-35.4-8.5-15.2-12.8-31.8-12.8-49.7 0-19 4.8-36.5 14.3-52.3s22.3-27.5 38.3-35.1c-4.2-11.4-6.3-22.9-6.3-34.3 0-27 9.1-50.1 27.4-69.1s40.2-28.6 65.7-28.6c11.4 0 22.3 2.1 32.6 6.3 8-16.4 19.5-29.6 34.6-39.7 15-10.1 31.5-15.2 49.4-15.2s34.4 5.1 49.4 15.1c15 10.1 26.6 23.3 34.6 39.7 10.3-4.2 21.1-6.3 32.6-6.3 25.5 0 47.3 9.5 65.4 28.6s27.1 42.1 27.1 69.1c0 12.6-1.9 24-5.7 34.3 16 7.6 28.8 19.3 38.3 35.1 9.5 15.9 14.3 33.4 14.3 52.4zm-266.9 77.1 105.7-158.3c2.7-4.2 3.5-8.8 2.6-13.7-1-4.9-3.5-8.8-7.7-11.4-4.2-2.7-8.8-3.6-13.7-2.9-5 .8-9 3.2-12 7.4l-93.1 140-42.9-42.8c-3.8-3.8-8.2-5.6-13.1-5.4-5 .2-9.3 2-13.1 5.4-3.4 3.4-5.1 7.7-5.1 12.9 0 5.1 1.7 9.4 5.1 12.9l58.9 58.9 2.9 2.3c3.4 2.3 6.9 3.4 10.3 3.4 6.7-.1 11.8-2.9 15.2-8.7z" fill="#1da1f2"/></svg>
		</div>
		</div>
	{%- endif -%}

	{%- if publisher_profile -%}
	<div>
		<h5 class="text-xl font-semibold text-gray-900">Publisher</h5>
		<a class="text-base text-gray-800 hover:text-gray-900"
			href="{{ 'mailto:{}'.format(publisher_profile.contact_email) if  publisher_profile.contact_email else '#'}}">
			{{ publisher_profile.display_name }}
		</a>
	</div>
	{%- endif -%}

	<div>
		<h5 class="text-xl font-semibold text-gray-900">Categories</h5>
		<div class="mt-2">
			<!-- Hard-coded for now -->
			{%- if app.subscription_type == 'Freemium'-%} {{ badge_green('Freemium')
			}} {%- elif app.subscription_type == 'Paid'-%} {{ badge_green('Paid') }}
			{%- else -%} {{ badge_gray('Free') }} {%- endif -%} {%- for category in
			app.categories -%}
			<div class="inline-flex flex-row mt-4 mr-2">
				{{ badge_gray(category.category) }}
			</div>
			{%- endfor -%}
		</div>
	</div>

	<div>
		<h5 class="text-xl font-semibold text-gray-900">Learn more & Support</h5>
		<ul class="flex flex-col mt-4 space-y-3">
			{%- for label, icon, href in [ ('Visit Website', 'external-link',
			app.website), ('Support', 'life-buoy', app.support), ('Documentation',
			'file-text', app.documentation), ('Privacy Policy', 'lock',
			app.privacy_policy), ('Terms of Service', 'shield', app.terms_of_service)
			] -%} {%- if href -%}
			<li>
				<a class="flex flex-row space-x-1 text-gray-600 hover:text-gray-800" target="_blank" href="{{ href }}">
					<i class="w-4 h-4" data-feather="{{ icon }}"></i>
					<span class="text-base">{{ label }}</span>
				</a>
			</li>
			{%- endif -%} {%- endfor -%}
		</ul>
	</div>

	<div>
		<h5 class="text-xl font-semibold text-gray-900">Supported Versions</h5>
		<ul class="mt-4 space-y-1 text-base text-gray-600">
			{%- for supported_version in supported_versions -%}
			<li>
				{{
				link(supported_version.version,
				supported_version.frappe_source.repository_url + '/tree/' +
				supported_version.frappe_source.branch, blank=True)
				}}
			</li>
			{%- endfor -%}
		</ul>
	</div>
</div>
{% endmacro %}


{% macro main() %}
<div class="w-full border-b md:w-10/12 md:border-b-0">
	<div class="flex flex-row items-center">
		<div class="mr-2 md:hidden">{{ app_image(app) }}</div>
		<h1 class="mb-2 text-4xl font-semibold text-gray-900 md:text-5xl">
			{{ app.title }}
		</h1>
	</div>
	<p class="mt-2 text-base text-gray-700 md:mt-0">{{ app.description }}</p>
	<div class="mt-4 flex flex-row justify-items-center">
		{{ button('Install Now', '/dashboard/install-app/' + app.name, 'primary') }}
		<div class="ml-2 mt-2 flex flex-row text-sm text-gray-600 justify-items-end">
			<i class="w-4 h-4 mx-2" data-feather="download"></i>
			<span>{{ no_of_installs | number_k_format }} {{ 'install' if no_of_installs
				== 1 else 'installs' }}</span>
		</div>
	</div>

	<!-- Pricing Plans (if any) -->
	{%- if plans -%}
	<h5 class="text-xl font-semibold text-gray-900 mb-2 mt-5">Pricing</h5>
	{{ app_plans_list(plans) }}
	{%- endif -%}

	{%- if app.screenshots -%}
	<div class="flex mt-6 space-x-4 overflow-y-auto">
		{%- for image in app.screenshots -%}
		<div class="flex-shrink-0 overflow-hidden border rounded-md h-60 w-80">
			<a href="{{ image.image }}">
				<img class="object-cover w-full h-full" src="{{ image.image }}" alt="{{ image.caption or '' }}" />
			</a>
		</div>
		{%- endfor -%}
	</div>
	{%- endif -%}
	<div class="w-full pb-8 mt-6 prose-sm prose text-gray-900">
		{{ frappe.utils.md_to_html(app.long_description) }}
	</div>

	<!-- App Reviews Section -->
	<div class="max-w-4xl">
		<div>
			<div class="flex flex-row justify-between" style="margin-bottom: 2.25rem;">
				<h2 class="text-2xl text-gray-900 font-bold">User Reviews</h2>
				{{ button('Write a review', link='/dashboard/user-review/' + app.name + '?title=' + app.title) }}
			</div>

			{%- if (user_reviews | length) > 0 -%}
			<div class="pl-4 flex flex-row space-x-1 divide-opacity-95 divide-x-2">
				<div class="text-center" style="padding-right: 2.75rem;">
					<h3 class="text-6xl text-gray-900 font-bold"> {{ ratings_summary.avg_rating }} </h3>
					<p class="text-base text-gray-600">
						{{ ratings_summary.total_num_reviews }}
						{{ 'rating' if ratings_summary.total_num_reviews == 1 else 'ratings'}}
					</p>
					<div class="mt-3 mb-1 bg-gray-100 py-2 px-3 rounded-full">
						{{ five_star_rating(ratings_summary.avg_rating) }}
					</div>
					<p class="text-sm text-gray-600">{{ ratings_summary.avg_rating }} out of 5</p>
				</div>
				<!-- Star percentages section -->
				<div class="space-y-2" style="padding-left: 2.75rem;">
					{%for i in range(5, 0, -1) %}
					<div class="flex flex-row text-gray-600 text-sm items-center space-x-2">
						<p>{{i}} Star</p>
						<div class="w-28 h-1 bg-gray-200 rounded-full" style="width: 7rem;">
							<div class="h-1 bg-gray-600 rounded-full"
								style="width: {{ ratings_summary.rating_percentages[i] }}%;"></div>
						</div>
						<p>{{ ratings_summary.rating_percentages[i] }}%</p>
					</div>
					{% endfor %}
				</div>
			</div>

			<!-- Written reviews section -->
			<div class="mt-12 divide-y-2 divide-gray-200">
				{% for review in user_reviews %}
				<div class="pb-3">
					<div class="mb-2 mt-3 flex flex-row items-center">
						<h3 class="text-gray-900 font-semibold text-lg">
							{{ review.title }}
						</h3>
						<div class="ml-3">
							{{ five_star_rating(review.rating) }}
						</div>
					</div>
					<p class="text-base text-gray-900 mb-2">
						{{ review.review }}
					</p>
					<div class="text-base text-gray-600">
						{{ review.user_name }} &bull; {{ frappe.utils.pretty_date(review.creation) }}
						&bull; {{ link('Reply', url='/dashboard/developer-reply/' + app.name + '/' + review.name + '?title=' + app.title) }}
						<div class="flex flex-col mt-4">
							{% for reply in review.developer_reply %}
							<div class="flex flex-row text-gray-900 mb-2">

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#71717A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-corner-down-right mr-2 mt-2"><polyline points="15 10 20 15 15 20"></polyline><path d="M4 4v7a4 4 0 0 0 4 4h12"></path></svg>

<div>
							{% if reply[0] == ',' %}
								{{ reply[1:] }}
							{% else %}
								{{ reply }}
							{% endif %}
							{% if reply %}
							<span class="text-gray-600"></br>Developer
							{% endif %}
</div>
							</div>
							{% endfor %}
						</div>
					</div>
				</div>
				{% endfor %}
			</div>
			{%- else -%}
			<div>
				<p class="text-gray-700 text-lg">No reviews yet, be the first to review.</p>
			</div>
			{%- endif -%}
		</div>
	</div>
</div>
{% endmacro %}


{% macro app_image(app, class='') %}
<div class="w-12 h-12 md:w-24 md:h-24 lg:w-44 lg:h-44 {{ class }}">
	{%- if app.image -%}
	<img class="object-cover border border-gray-200 rounded-lg" src="{{ app.image }}" alt="{{ app.title }}" />
	{%- else -%}
	<div class="flex items-center justify-center text-gray-500 bg-gray-100 border border-gray-200 rounded-lg">
		{{ app.title[0].upper() }}
	</div>
	{%- endif -%}
</div>
{% endmacro %}


{% macro app_plans_list(plans) %}
<div class="mx-auto grid grid-cols-1 gap-2 md:grid-cols-3 sm:grid-cols-2">
	{%- for plan in plans -%}
	{{ app_plan_card(plan) }}
	{%- endfor -%}
</div>
{% endmacro %}


{% macro app_plan_card(plan) %}
<div class="flex flex-col justify-between rounded-2xl border border-gray-100 p-5 shadow hover:border-gray-300">
	<div>
		<h4 class="text-xl font-semibold text-gray-900">
			{%- if plan.is_free -%}
			<span> Free </span>
			{%- else -%}

			<span>
				${{ frappe.utils.rounded(plan.price_usd) }}<span class="text-base font-normal text-gray-600">
					/mo</span>
			</span>
			{%- endif -%}
		</h4>

		<div class="mt-5">
			{{ feature_list(plan.features) }}
		</div>
	</div>

	<div class="mt-4">
		{{ button('Buy', '/dashboard/install-app/' + app.name, 'primary') }}
	</div>
</div>
{% endmacro %}


{% macro feature_list(features) %}
<ul class="space-y-2 text-sm text-gray-700">
	{%- for feature in features -%}
	<li class="flex flex-row justify-items-center" v-for="feature in features" :key="feature">
		<div class="mr-2">
			<!-- Circular check icon -->
			<div class="grid h-4 w-4 shrink-0 place-items-center rounded-full border border-green-500 bg-green-50">
				<svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
					<path d="M1.26562 3.86686L3.93229 6.53353L9.26562 1.2002" stroke="#38A160" stroke-miterlimit="10"
						stroke-linecap="round" stroke-linejoin="round" />
				</svg>
			</div>
		</div>
		{{ feature }}
	</li>
	{%- endfor -%}
</ul>
{% endmacro %}
